<script setup>
/**
 * @/views/home/components/VideoCard.vue
 * 视频卡片组件
 */

/* 导入 */
import { useTownStore } from "@/stores";
import { ref, watch } from "vue";

/* 数据 */
const townStore = useTownStore();
const currentTownVideo = ref("https://test.com");
const currentTownBackground = ref("https://test.com");

/* 侦听 */
watch(
  () => townStore.currentTown,
  (newTown) => {
    if (newTown && newTown.townvideo) {
      currentTownVideo.value = newTown.townvideo;
      currentTownBackground.value = newTown.townbackground;
    }
  },
  { immediate: true }, // 这里的 immediate: true 确保在初次加载时也能触发
);
</script>

<template>
  <div class="video-card">
    <el-card style="width: 20vw">
      <template #header>
        <div class="card-header">
          <span>小镇视频</span>
        </div>
      </template>
      <video
        class="video-player"
        controls
        :src="currentTownVideo"
        :poster="currentTownBackground"
      ></video>
    </el-card>
  </div>
</template>

<style scoped>
/* 调整视频宽度为铺满整个卡片 */
.video-player {
  width: 100%;
}
</style>
